<template>
  <div id="tiktok-cps">
    <c-title text="电商CPS"></c-title>
    <div class="top" v-if="show_flag" >
      <van-search shape="round" readonly @click="link" @search="link" placeholder="请输入关键词" />
    </div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in CarouseList" :key="item.id">
        <img :src="item.pic" style="width: 100%;" @click="link(item.url)" />
      </van-swipe-item>
    </van-swipe>
    <div class="ment" v-if="(button_group && button_group.length !== 0)">
      <c-ment :datas="fun.chunk(button_group, 10)" @open_dialog="open_dialog"></c-ment>
    </div>

    <div class="platform">
      <div v-if="aggregate_module_show.includes(1)" class="platform-item"
        :class="{ 'platform-current': platform_index == 1 }" @click="platform_handle(1)">
        <img :src="imgHost + 'dy.png'" />
        <div>抖音</div>
      </div>
      <div v-if="aggregate_module_show.includes(2)" class="platform-item"
        :class="{ 'platform-current': platform_index == 2 }" @click="platform_handle(2)">
        <img :src="imgHost + 'tb.png'" />
        <div>淘宝</div>
      </div>
      <div v-if="aggregate_module_show.includes(3)" class="platform-item"
        :class="{ 'platform-current': platform_index == 3 }" @click="platform_handle(3)">
        <img :src="imgHost + 'jd.png'" />
        <div>京东</div>
      </div>
      <div v-if="aggregate_module_show.includes(4)" class="platform-item"
        :class="{ 'platform-current': platform_index == 4 }" @click="platform_handle(4)">
        <img :src="imgHost + 'pdd.png'" />
        <div>拼多多</div>
      </div>
      <div v-if="aggregate_module_show.includes(5)" class="platform-item"
        :class="{ 'platform-current': platform_index == 5 }" @click="platform_handle(5)">
        <img :src="imgHost + 'wph.png'" />
        <div>唯品会</div>
      </div>
    </div>
    <div class="content">
      <div class="nav">
        <van-tabs v-model="active" line-width="1.25rem"  @click="category_handle"
          v-if="category_list && category_list.length !== 0 && (platform_index == 1 || platform_index == 3 || platform_index == 4)">
          <van-tab v-for="(item, i) in category_list" :key="i"  :title="item.name" :name="item.cate_id"></van-tab>
        </van-tabs>
        <div class="tab" v-if="show_flag">
          <span @click="choose(1)" :class="{ active: choose_index == 1 }">综合</span>
          <span @click="choose(2)"
            :class="{ active: choose_index == 2, up: sort.up == 1 && choose_index == 2, down: sort.down == 1 && choose_index == 2 }"
            class="grid-content">销量</span>
          <span @click="choose(3)"
            :class="{ active: choose_index == 3, up: sort.up == 1 && choose_index == 3, down: sort.down == 1 && choose_index == 3 }"
            class="grid-content">价格</span>
        </div>
      </div>
      <div class="list">
        <div class="list-item" v-for="item in list" :key="item.id" @click="link_goods(item)">
          <div class="img">
            <van-image width="100%" height="100%" :src="item.cover" />
          </div>
          <div class="title">
            <span class="title-box">
              <span
                :class="platform_index == 1 ? 'tik-tok-text' : 'cps-text'">{{ platform_index == 1 ? '抖音' : platform_index == 2 ? '淘宝' : platform_index == 3 ? '京东' : platform_index == 4 ? '拼多多' : '唯品会' }}</span>
              <span>{{item.title||item.cat_leaf_namew }}</span>
            </span>
          </div>
          <div class="item-center">
            <div class="make-money" v-if="item.share_reward">
              <span class="p-4 fs-10 line">赚</span>
              <span class="p-4 fs-10">{{ $i18n.t('money') }}{{ item.share_reward }}</span>
            </div>
            <template v-if="!show_flag">
              <div class="buy" v-if="isReady">
                <template v-if="platform_index==2">月销{{ item.month_sales||'0' }}</template>
                <template v-else>{{ item.sales}}</template>
              </div>
            </template>
            <template v-else>
              <div class="buy" v-if="platform_index == 3">月销{{ item.inOrderCount30Days ||'0'}}</div>
              <div class="buy" v-if="platform_index !== 3 && isReady">月销{{ item.sales||'0' }}</div>
            </template>
          </div>
          <div class="item-bottom">
            <template v-if="item.coupon_price * 1 < item.price * 1">
              <div class="c-FF6238" style="font-size: 0.75rem;flex-shrink: 0;">
                到手价<span style="font-size: 0.875rem;">{{ $i18n.t('money') }}{{ item.coupon_price }}</span>
              </div>
              <div class="fs-12 c-999 line-through ml-12" style="flex-shrink: 0;">原价{{ $i18n.t('money') }}{{ item.price }}</div>
            </template>
            <template v-else>
              <div class="c-FF6238" style="font-size: 0.875rem;">{{ $i18n.t('money') }}{{ item.price }}</div>
            </template>
          </div>
        </div>
      </div>
    </div>

    <van-overlay :show="show_dy_popup" @click="show_dy_popup = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <div class="dialog-title">{{ activity_name }}</div>
          <div class="close" @click="show_dy_popup = false">
            <van-icon name="cross" />
          </div>
          <p class="link_dy">{{ dy_password }}</p>
          <div style="position: relative; bottom: 5%; left: 0; right: 0;" v-clipboard:copy="dy_password"
            v-clipboard:success="onCopy" v-clipboard:error="onError">
            <van-button style="width: 100%; border: none;" color="#EF3532">一键复制，打开抖音APP下单</van-button>
          </div>
        </div>
      </div>
    </van-overlay>

  </div>
</template>

<script>
import { Image as VanImage, Toast } from "vant";
import { scrollMixin } from "../../../utils/mixin";
import cMent from "./component/menu.vue";
export default {
  mixins: [scrollMixin],
  components: { VanImage, cMent },
  data() {
    return {
      imgHost: "",
      isReady: true,
      platform_index: 2,
      aggregate_module_show: [],//平台类型 1抖音2淘宝3京东4拼多多5唯品会
      activity_name: "",
      dy_password: "",
      show_dy_popup: false,
      choose_index: 1,
      SearchValue: "",
      CarouseList: [],

      list: [],

      current_page: 1,
      last_page: 1,
      isLoadMore: true,

      order_type: 0,
      search_type: 0,
      cate_id: "",//一级分类id

      sort: {
        up: 0,
        down: 0
      },
      category_list: [],
      button_group: [],

      show_flag: true,
    };
  },
  mounted() {
    this.imgHost = `${window.location.origin}/static/local/tiktok-cps/`;
    this.show_flag = true;
    this.isLoadMore = true;
    this.cate_id = '';
    if (this.$route.query.album_id) {
      this.show_flag = false;
    }
    this.buttonGroup();
    this.get_aggregate();
    this.getCarouse();
    // this.getCategory();
  },
  methods: {
    get_goods_cate(aggregate_module_code) {
      let json = { aggregate_module_code, level: 0 };
      $http.get('plugin.tiktok-cps.api.goods.good-cate', json, '.').then(res => {
        if (res.result) {
          let category_list = [], cate_id = '';
          if (aggregate_module_code == 1) {
            category_list = res.data.data || [];
            cate_id = res.data.data.length !== 0 && res.data.data[0].cate_id;
          } else {
            category_list = res.data;
            cate_id = res.data[0].cate_id;
          }
          this.category_list = category_list

          this.cate_id = cate_id;
        }
        this.getData({ page: 1, search_type: this.search_type, order_type: this.order_type });
      })
    },
    platform_handle(index) {
      this.isReady = false;
      this.platform_index = index;
      if (index == 1) {
        this.getCategory()
      } else {
        if (index == 3 || index == 4) {
          this.get_goods_cate(index);
        } else {
          this.getData({ page: 1, search_type: this.search_type, order_type: this.order_type });
        }
      }
    },
    get_aggregate() {
      $http.get("plugin.tiktok-cps.api.goods.getAggregateModuleShow").then(res => {
        if (res.result) {
          let arr = res.data.aggregate_module_show;
          let platform_index = arr.includes(2) ? 2 : arr[0];
          if(this.$route.query.aggregate_module_code){
            platform_index = this.$route.query.aggregate_module_code;
          }
          this.platform_index = platform_index;
          this.aggregate_module_show = arr;
          if (platform_index == 1) {
            this.getCategory()
          } else {
            if (platform_index == 3 || platform_index == 4) {
              this.get_goods_cate(platform_index);
            } else {
              this.getData({ page: 1, search_type: this.search_type, order_type: this.order_type });

            }
          }
        }
      })

    },
    onCopy() {

      Toast({
        message: "复制成功",
        position: "bottom",
        duration: 1000
      });
      this.show_dy_popup = false;
    },
    onError() {
      Toast({
        message: "复制失败",
        position: "bottom",
        duration: 1000
      });
    },
    open_dialog(data) {
      this.activity_name = data.name;
      $http.get("plugin.tiktok-cps.api.goods.aggregate-h5", { material_id: data.material_id }).then(res => {
        if (res.result) {
          console.log(res.data, "data=====");
          this.dy_password = res.data.command;
          if (this.fun.isCPS()) {
            let json = { dy_deeplink: res.data.deeplink };
            if (this.fun.isIosOrAndroid() === "ios") {
              IOStoTikTok(JSON.stringify(json))
            } else {
              androidToTikTok(res.data.deeplink)
            }
          } else {
            this.show_dy_popup = true;
          }
        } else {
          this.$toast(res.msg);
        }
      })
    },
    async buttonGroup() {
      let { data, msg, result } = await $http.get("plugin.tiktok-cps.api.goods.button-group");
      if (result == 0) return this.$toast(msg);
      this.button_group = data;
    },
    async getCategory() {
      let { data, msg, result } = await $http.get("plugin.tiktok-cps.api.goods.good-recommend-cate");
      if (result == 0) {
        return this.$toast(msg)
      }
      this.category_list = data || [];
      data && (this.cate_id = data[0].cate_id)
      this.getData({ page: 1, cate_id: this.cate_id, search_type: this.search_type, order_type: this.order_type });

    },
    async category_handle() {
      this.cate_id = this.active;
      this.getData({ page: 1, search_type: this.search_type, order_type: this.order_type, cate_id: this.active })
    },
    link_goods({ product_id,cos_amount='',cos_ratio='' }) {
      let json = {id: product_id, aggregate_module_code: this.platform_index}
      if(this.platform_index==2){
        json.cos_amount = cos_amount;
        json.cos_ratio = cos_ratio;
      }
      this.$router.push(this.fun.getUrl("TikTokDetail", json, {}));
    },
    link(url) {
      window.open(url, "_blank");
    },
    choose(index) {
      this.choose_index = index;
      let order_type = 0;
      if (index !== 1) {
        if (this.sort.up == 0 && this.sort.down == 0) {
          this.sort.up = 1;
        } else if (this.sort.up == 1) {
          this.sort.down = 1;
          this.sort.up = 0;
        } else if (this.sort.down == 1) {
          this.sort.up = 1;
          this.sort.down = 0;
        }
      } else if (this.choose_index == 1) {
        this.sort.up = 0;
        this.sort.down = 0;
      }
      if (this.sort.down == 1) {
        order_type = 1;
      }
      let search_type = index - 1;
      this.search_type = search_type;
      this.order_type = order_type;
      this.getData({ page: 1, search_type, order_type, cate_id: this.cate_id });
    },
    get_Authorize() {
      $http.get("plugin.tiktok-cps.api.goods.pddPromUrlGenerate").then(res => {
        if (res.result) {
          window.location.href = res.data.url_list[0].mobile_url;
        } else {
          this.$toast(res.msg);
        }
      })
    },
    link() {
      this.$router.push(this.fun.getUrl("TikTokSearch"));
    },
    async getData(json) {
      let url = "plugin.tiktok-cps.api.goods.good-list";
      if (!this.show_flag) {
        let { page } = json;
        json = {
          page,
          album_id: this.$route.query.album_id,
          aggregate_module_code:this.platform_index
        }
        url = "plugin.tiktok-cps.api.goods.album-good-list";
      } else {
        let _json = {};
        _json.page = json.page;
        _json.aggregate_module_code = this.platform_index;
        if (this.platform_index == 2) { //淘宝
          _json.title = '家电'
          _json.order_type = json.order_type;
          if(json.search_type==0){
            _json.search_type = 2
            _json.order_type = 0;
          }else if(json.search_type==1){
            _json.search_type = 0;
          }else if(json.search_type==2){
            _json.search_type = 4;
          }
        } else if (this.platform_index == 3) {//京东
          _json.cate_v1 = this.cate_id;
        } else if (this.platform_index == 4) {//拼多多
          _json.cate_id = this.cate_id;
        } else if (this.platform_index == 5) {//唯品会
          _json.title = '家电';

        }

        if (this.platform_index == 3 || this.platform_index == 4 || this.platform_index == 5) {
          if (json.search_type == 1 && json.order_type == 0) {
            _json.search_type = 5
          } else if (json.search_type == 1 && json.order_type == 1) {
            _json.search_type = 6;
          } else if (json.search_type == 2 && json.order_type == 0) {
            _json.search_type = 3;
          } else if (json.search_type == 2 && json.order_type == 1) {
            _json.search_type = 4;
          } else {
            _json.search_type = json.search_type;
          }
        }
        if (this.platform_index !== 1) {
          json = _json;
        }
      }
      let { result, msg, data } = await $http.get(url, json, '.');
      console.log(data,result,'===========');
      if (!this.show_flag) {
        if(result){
            this.isReady = true;
            if(this.platform_index==2){
              this.list = data;
            }else{
              this.list = data.current_page ==1? data.data:this.list.concat(data.data);
              this.current_page = Number(data.current_page);
              this.last_page = data.last_page;
            }
            this.isLoadMore = true;
        }else{
          this.$toast(msg);
        }

        return;
      }
      if (data.code == 2 && result == 0) {//拼多多授权
        this.get_Authorize();
        return;
      }
      if (result == 0) {
        return this.$toast(msg);
      }
      if (json.page <= 1) {
        if (this.platform_index !== 1) {
          this.list = data.data || [];
        } else {
          this.list = data.products || [];

        }
      } else if (json.page > 1) {
        if (this.platform_index !== 1) {
          this.list = this.list.concat(data.data)
        } else {
          this.list = this.list.concat(data.products);

        }
      }
      this.current_page = Number(data.current_page);
      this.last_page = data.last_page;
      this.isLoadMore = true;
      this.isReady = true;
    },
    async getCarouse() {
      let { result, msg, data } = await $http.get("plugin.tiktok-cps.api.rotation.rotation-list");
      if (result == 0) {
        return this.$toast(msg);
      }
      this.CarouseList = data || [];
    },
    getMoreData() {
      if (this.current_page >= this.last_page) {
        return;
      }
      this.isLoadMore = false;
      let page = this.current_page + 1;
      this.getData({ page, order_type: this.order_type, search_type: this.search_type, cate_id: this.cate_id });
    }
  }
};
</script>

<style lang='scss' scoped>
::v-deep .van-tab--active {
  font-weight: 500 !important;
  font-size: .9375rem !important;
  color: #00001C !important;
}

::v-deep .van-tab {
  font-weight: 400;
  font-size: .875rem;
  color: #6E6E79;
}

#tiktok-cps {
  .platform {
    margin: .625rem .75rem;
    display: flex;
    align-items: center;

    .platform-item:last-child {
      margin-right: 0;
    }
  }


  .platform-current {
    position: relative;
    border: 1px solid #F15353;
    color: #F15353 !important;

    div {
      position: relative;
      padding: .1875rem .7188rem;
      box-sizing: border-box;
      font-weight: 500;
      line-height: 1;
    }

    div::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: #F15353;
      border-radius: .25rem .25rem .25rem .25rem;
      opacity: 0.1;
    }

    &::before {
      content: "";
      position: absolute;
      top: 98%;
      left: 50%;
      transform: translateX(-50%);
      border: 0.35rem solid transparent;
      border-top-color: #fff;
      z-index: 5;
    }

    &::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 0.35rem solid transparent;
      border-top-color: #FF5544;
    }
  }

  .platform-item {
    width: 4rem;
    height: 4.625rem;
    background: #FFFFFF;
    border-radius: .5rem;
    // border: 1px solid #F15353;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: .5313rem;
    font-size: .75rem;
    padding-bottom: .4063rem;

    img {
      width: 2rem;
    }
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .dialog-title {
    text-align: center;
    font-size: 1.5rem;
  }

  .link_dy {
    margin-top: 1.0625rem;
    margin-bottom: 1.25rem;
    overflow: hidden;
    word-break: break-all;
    text-align: left;
    color: #999;
    font-size: 0.75rem;
  }

  .close {
    position: absolute;
    right: 5%;
    top: 5%;
  }

  .block {
    position: relative;
    width: 17.5rem;
    border-radius: 0.25rem;
    background-color: #fff;
    padding: 1.25rem 0.625rem;
  }

  .ment {
    background: #fff;
    margin: .625rem .75rem;
    border-radius: .5rem;
    overflow: hidden;
  }

  .current_category {
    color: #00001C !important;
    font-weight: 500;
    font-size: .9375rem;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: -.3125rem;
      width: 1.25rem;
      height: .1875rem;
      background: #F15353;
      border-radius: .9375rem;
    }
  }

  .category {
    padding: .8438rem 0;
    display: flex;
    overflow-x: auto;

    span {
      margin-right: 1.5625rem;
      font-weight: 400;
      font-size: .875rem;
      color: #6E6E79;
      flex-shrink: 0;
    }
  }

  .category::-webkit-scrollbar {
    display: none;
  }

  .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background: #f1f1f1;
    padding-bottom: 3.125rem;
  }

  .grid-content::after {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.625rem;
    background: url(../../../assets/images/jd-sprites.png) no-repeat;
    background-size: 12.5rem 12.5rem;
    background-position: -10.625rem -1.875rem;
    margin-left: 0.25rem;
  }

  .grid-content.up,
  .grid-content.down {
    color: #f15353;
  }

  .grid-content.up::after {
    background-position: -10.625rem -0.9375rem;
  }

  .grid-content.down::after {
    background-position: -10.625rem 0;
  }

  .p-4 {
    padding: 0.1rem 0.25rem;
  }

  .item-center {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 0.5rem;
  }

  .img {
    width: 100%;
    height: 10.5938rem;
  }

  .flex {
    display: flex;
  }

  .fs-10 {
    font-size: 0.625rem;
  }

  .between {
    justify-content: space-between;
  }

  .sort {
    position: relative;
  }

  .sort-item {
    position: absolute;
    right: -20px;
    top: 0;
    bottom: 0;
    width: 20px;

    &::after {
      content: "";
      left: 0;
      top: 0;
      position: absolute;
      border: 5px solid #000;
      border-top-color: transparent;
      border-bottom-color: #ccc;
      border-left-color: transparent;
      border-right-color: transparent;
    }
  }

  .item-bottom {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem 0.9rem;
  }

  .ml-4 {
    margin-left: 0.25rem;
  }

  .line-through {
    text-decoration: line-through;
  }

  .ml-12 {
    margin-left: 0.75rem;
  }

  .c-999 {
    color: #999;
  }

  .c-FF6238 {
    color: #ff6238;
  }

  .fs-12 {
    font-size: 0.75rem;
  }

  .make-money {
    border-radius: 0.25rem;
    display: flex;
    justify-content: space-between;
    color: #ff7b05;
    border: 1px solid #ff7b05;

    .line {
      position: relative;

      &::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 0.0313rem;
        height: 100%;
        background: #ff7b05;
      }
    }
  }

  .list-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 46%;
    overflow: hidden;
    border-radius: 0.5rem;
    overflow: hidden;
    margin: 0.75rem 0.375rem 0;
    background-color: #fff;
    z-index: 10;
  }

  .cps-text,
  .tik-tok-text {
    color: #fff;
    padding: 0 5px;
    border-radius: 5px;
    margin-right: 5px;
    font-size: 0.75rem;
  }

  .cps-text {
    background-color: #F15353;
  }

  .tik-tok-text {
    background: rgb(0, 0, 0);
  }

  .title {
    width: 100%;
    display: flex;
    text-align: left;
    padding: 0.1875rem 0.5rem 0.375rem;
    .title-box{
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      color: #3b3b4a;
      word-break: break-all;
    }
  }

  .buy {
    color: #999;
    font-size: 0.75rem;
  }

  .active {
    color: #ef5452;
  }

  .nav {
    z-index: 10;
    position: relative;
  }

  .content {
    position: relative;
    border-radius: .75rem;
    overflow: hidden;
    z-index: 10;

    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 6.4375rem;
      background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
      z-index: 0;
    }

  }

  .tab {
    display: flex;
    padding-top: 10px;
    padding-bottom: 12px;
    padding-left: 1.125rem;

    span {
      margin-right: 1.5625rem;
    }
  }

  .van-search {
    flex: 1;
  }

  .top-right {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 10px 15px;
    padding-top: 10px;
  }

  .top {
    display: flex;
    background: #fff;
    align-items: center;
  }
}
</style>